<template>
	<view class="topicdetailPage">
		<topic-info :list="topicInfoList" />

		<divider />
		<view class="topicText" hover-start-time=15 hover-stay-time=200 hover-class="bgcolor" v-for="(item,index) in hotList"
		 :key="index">
			<text class="iconfont icon-shangchuan icon"></text>
			<text class="topicTextContent">{{item.title}}</text>
		</view>
		<divider />

		<!-- tab -->
		<view class="tab">
			<view @tap="changeTab(index)" :class="tabbarsIndex === index ? 'tabActive':''" v-for="(item,index) in tabbars" :key="index">{{item}}</view>
		</view>

		<!-- 列表 -->
		<template v-if="list.length > 0">
			<block v-for="(items,indexs) in list" :key="indexs">
				<common-list :item="items" :index="indexs" />
				<divider />
			</block>
			<!-- 上拉加载 -->
			<!-- <view class="loadmore">
				<text>加载中...</text>
			</view> -->
		</template>

		<!-- 当没有数据时提示信息 -->
		<template v-else>
			<nothing />
		</template>

	</view>
</template>

<script>
	import topicInfo from "@/components/topicdetail/topic-info.vue";
	import commonList from "@/components/common/common-list.vue";
	import nothing from "@/components/common/nothing.vue"
	export default {
		components: {
			topicInfo,
			commonList,
			nothing
		},
		onLoad(e) {
			if (e.detail) {
				this.topicInfoList = JSON.parse(e.detail);
			};
			this.getDate();
		},
		data() {
			return {
				// 将topicInfoList传递给子组件topic-info
				topicInfoList: null,
				hotList: [{
					title: "【新人必读】uni-app实战第二季商城类的项目"
				}, {
					title: "【新人必读】uni-app实战第二季商城类的项目"
				}],
				// tab
				tabbarsIndex: 0, //当前默认选中tab
				tabbars: ["默认", "最新"],

				// 列表
				list: [],
			};
		},
		// 触底事件
		onReachBottom() {
			uni.showToast({
				title: `上拉加载更多...`,
				icon: "none"
			});
		},
		methods: {
			changeTab(index) {
				this.tabbarsIndex = index;
			},
			async getDate() {
				let {
					result,
					success
				} = await uniCloud.callFunction({
					name: "index",
					data: {
						method: "add"
					}
				});
				this.list = result.data;
			},
		},
	}
</script>

<style lang="scss">
	.topicText {
		width: 100vw;
		padding: 0 20rpx;
		// margin: 30rpx 0;
		height: 110rpx;
		display: flex;
		align-items: center;
		position: relative;
		border-bottom: 2rpx solid #E2E2E2;

		.icon {
			@include flexCenterCenter;
			background-color: #469ADE;
			padding: 10rpx 12rpx;
			color: #FFFFFF;
			border-radius: 10rpx;
		}

		.topicTextContent {
			// 文本溢出省略效果
			@include textEllipsis;
		}
	}

	// tab
	.tab {
		@include flexCenterCenter;
		margin: 25rpx 20rpx;

		>view {
			letter-spacing: 10rpx;
			flex: 1;
			text-align: center;
		}

		.tabActive {
			@include fontMainColor;
			font-size: 1.08rem;
			font-weight: bolder;
		}
	}
</style>
